<template>
    <el-row :gutter="obj.gutter">
        <el-col v-for="item in obj.children" :span="item.props.span">
            <el-card>
                <draggable
                    style="min-height: 200px;"
                    v-model="item.children"
                    item-key="id"
                    group="people"
                    scrollSensitivity="100"
                >
                    <template #item="{element,index}">
                        <el-card>
                            <el-icon :size='16'>
                                <component :is="element.icon"/>
                            </el-icon>
                            {{ element.title }}
                        </el-card>
                    </template>
                </draggable>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
import draggable from "vuedraggable";

export default {
    name: "jRow",
    props: {
        obj: {
            type: Object
        }
    },
    components: {draggable}
}
</script>

<style scoped>

</style>
